<template>
  <div>
    <img
      class="uni-img"
      :src="src"
      :alt="alt"
      :title="title"
      ref="showImg"
      @click="showImg('show')"
    />
    <div class="img-view" ref="imgView" @click="showImg('close')">
      <span class="close-btn"></span>
      <img :src="src" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "mcImage",
  data() {
    return {
      imgView: false,
    };
  },
  props: {
    src: {
      type: String,
      required: true,
      default:
        "http://img5.adesk.com/5d353c4ee7bce75d8f8cfda7?imageMogr2/thumbnail/!720x1280r/gravity/Center/crop/720x720",
    },
    width: {
      type: String,
      default: "50px",
    },
    height: {
      type: String,
      default: "50px",
    },
    alt: {
      type: String,
    },
    title: {
      type: String,
    },
    radius: {
      type: [String, Number],
      default: "100%",
    },
    preview:{
      type:Boolean,
      default:true
    }
  },
  mounted() {
    let img = this.$refs.showImg;
    img.style.cssText = `border-radius:${this.radius};width:${this.width};height:${this.height}`;
  },
  methods: {
    showImg(type) {
      if(!this.preview)return
      if (type === "show") {
        this.$refs.imgView.style.cssText = "top:0;";
      } else {
        this.$refs.imgView.style.cssText = "top:2000px;";
      }
      this.imgView = !this.imgView;
    },
  },
  watch: {},
};
</script>

<style scoped>
.uni-img {
  padding: 0;
  margin: 0;
}
.img-view {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9938);
  left: 0;
  top: 2000px;
  transition: .3s ease-out;

}
.img-view img {
  position: absolute;
  transform: translate(-50%,45%);
  width: 100%;
}
.close-btn {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 30px;
  top: 30px;
  color: aliceblue;
}

.close-btn::before {
  content: "x";
  position: absolute;
  font-size: 40px;
}
</style>
